<template>
  <div>
   <detail-banner :gallaryImgs='gallaryImgs' :sightName='sightName' :bannerImg='bannerImg'></detail-banner>
   <detail-header></detail-header>
    <div class="content">
    <detail-List :list='list'></detail-List>
   </div>
  </div>
</template>

<script>
  import DetailBanner from './compontents/Banner.vue'
  import DetailHeader from './compontents/Header.vue'
  import DetailList from './compontents/List.vue'
  import axios from 'axios'
  export default{
    name: 'Detail',
    components: {
      DetailBanner,
      DetailHeader,
      DetailList
    },
    data() {
      return {
        bannerImg:'',
        sightName:'',
        gallaryImgs:[],
        list:[]
      }
    },
    methods: {
      getDetailInfo() {
        axios.get('/api/detail.json',{
          params: {
            id: this.$route.params.id
          }
        }).then(this.getHandleSucc)
      },
      getHandleSucc(res){
        res = res.data
      if(res.ret && res.data) {
        this.bannerImg = res.data.bannerImg
        this.sightName = res.data.sightName
        this.gallaryImgs = res.data.gallaryImgs
        this.list = res.data.list
      }
      },
    },
    mounted() {
      this.getDetailInfo()
    }
  }
</script>

<style lang="stylus" scoped>
</style>
